<template>
  <div class="no-traffic" style="width: 850px;">
    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      label-width="100px" 
      size="medium"
      style="margin-top: 10px">
      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="报账车辆" 
            prop="plateNum" 
            :rules="[{ required: true, message: '请选择报账车辆', trigger: 'blur' }]">
            <el-select
              style="width: 100%" 
              v-model="fm.ps.plateNum" 
              clearable filterable 
              placeholder="报账车辆">
              <el-option 
                v-for="item in carNumList" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="报账驾驶员" 
            prop="driverUname"
            :rules="[{ required: true, message: '请选择报账驾驶员', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.driverUname" 
              clearable filterable 
              placeholder="报账驾驶员">
              <el-option 
                v-for="it in driverList"
                :key="it.uname"
                :label="it.realName"
                :value="it.uname">
                <span>{{it.realName}}</span>
                <span>{{it.phone}}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="车辆公里数" 
            prop="currKm"
            :rules="[
              {required: true, message: '请输入公里数', trigger: 'blur'},
              this.$rules.isPosInt('公里数必须大于0')
            ]">
            <el-input 
              maxlength="7"
              placeholder="当前车辆公里数" 
              v-model="fm.ps.currKm">
              <b slot="suffix" class="c-black">公里</b>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="报账类型" 
            prop="reimTypeMark"
            :rules="[{ required: true, message: '请选择报账类型', trigger: 'blur' }]">
            <el-select
              :disabled="obj ? true : false"
              style="width: 100%" 
              v-model="fm.ps.reimTypeMark" 
              clearable 
              placeholder="报账类型">
              <el-option label="月停车费" value="YTCF"></el-option>
              <el-option label="月洗车费" value="YXCF"></el-option>
              <el-option label="审车费" value="SCF"></el-option>
              <el-option label="二保上线费" value="EBSXF"></el-option>
              <el-option label="无业务打单费" value="WYWDDF"></el-option>
              <el-option label="入职体检费" value="RZTJF"></el-option>
              <el-option label="其他记账" value="QTJZ"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="支付方式" 
            prop="payWay"
            :rules="[{ required: true, message: '请选择支付方式', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.payWay" 
              clearable 
              placeholder="支付方式">
              <el-option label="记账" value="JZ_PAY"></el-option>
              <el-option label="现金" value="CASH_PAY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="报账金额" 
            prop="jzMoney"
            :rules="[
              {required: true, message: '请输入报账金额', trigger: 'blur'},
              this.$rules.isFloat('报账金额必须大于0')
            ]">
            <el-input 
              maxlength="6"
              placeholder="报账金额" 
              v-model="fm.ps.jzMoney">
              <b slot="suffix" class="c-black">元</b>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="报账日期" required>
            <el-col :span="11">
              <el-form-item 
                prop="jzsDate" 
                :rules="[{ required: true, message: `${(!fm.ps.reimTypeMark || fm.ps.reimTypeMark === 'YTCF' || fm.ps.reimTypeMark === 'YXCF') ? '报账开始日期不能为空' : '报账日期不能为空'}`, trigger: 'blur' }]">
                <el-date-picker
                  style="width: 100%;"
                  v-model="fm.ps.jzsDate"
                  type="date"
                  :placeholder="(!fm.ps.reimTypeMark || fm.ps.reimTypeMark === 'YTCF' || fm.ps.reimTypeMark === 'YXCF') ? '报账开始日期' : '报账日期'"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>

            <template v-if="!fm.ps.reimTypeMark || fm.ps.reimTypeMark === 'YTCF' || fm.ps.reimTypeMark === 'YXCF'">
              <el-col :span="2" style="text-align: center;"><span>至</span></el-col>

              <el-col :span="11">
                <el-form-item 
                  prop="jzeDate" 
                  :rules="[{ required: true, message: '报账结束日期不能为空', trigger: 'blur' }]">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="fm.ps.jzeDate"
                    type="date"
                    placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </template>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="图片上传" 
            prop="jzUrl" 
            :rules="[{ required: true, message: '请上传图片', trigger: 'change' }]">
            <UploadImg
              imgName="jzUrl"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{userName: uname}"
              :src="fileBaseUrl+fm.ps.jzUrl"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="24">
          <el-form-item 
            label="报账备注" 
            prop="jzRemark" 
            :rules="[{ required: true, message: '请输入报账备注', trigger: 'blur' }]">
            <el-input 
              type="textarea"
              placeholder="报账备注" 
              v-model="fm.ps.jzRemark"
              show-word-limit
              maxlength="100"
              :rows="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="fm-btn-row">
      <el-button 
        :loading="fm.sb.load" 
        type="primary" 
        icon="el-icon-check" 
        @click="onSubmit">
        {{fm.sb.text}}
      </el-button>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import UploadImg from '@/components/UploadImg';

import * as commonSer from "@/api/services/common.service";
import * as orderSer from "@/api/services/order.service";
import * as logisticsSer from "@/api/services/logistics.service";

export default {
  name: "MoTraffic",
  props: {myData: Object},
  computed: {
    ...mapGetters(["uname"]),
  },
  components: { UploadImg },
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      // 修改对象
      obj: this.myData.obj,

      fm: {
        fname: 'oilItemFm',
        sb: {load: false, text: '提交申请'},
        ps: {
          // 修改记账记录id
          uid: '', 
          // 车辆当前公里数
          currKm: '', 
          // 驾驶员账号
          driverUname: '', 
          // 车牌号
          plateNum: '',
          // 报账类型 
          reimTypeMark: '', 
          // 支付方式
          payWay: '', 
          // 报账金额
          jzMoney: '', 
          // 记账开始日期
          jzsDate: '', 
          // 记账结束日期
          jzeDate: '', 
          // 备注
          jzRemark: '', 
          // 图片上传
          jzUrl: '', 
        }
      },

      // 车牌号-选择列表
      carNumList: [], 
      // 驾驶员-选择列表
      driverList: [], 
    }
  },
  created() {
    // console.log('无业务开支父级数据:', this.myData);
    const that = this, ps = that.fm.ps, o = that.obj;

    if(o){
      // 修改记账记录id
      ps.uid = o.id;
      // 车辆当前公里数
      ps.currKm = o.driverJzRecordId.currentKilo;
      // 驾驶员账号
      ps.driverUname = o.reimUser?.uname || '';
      // 车牌号
      ps.plateNum = o.plateNum;
      // 报账类型 
      ps.reimTypeMark = o.reimTypeId.typeMark;
      // 支付方式
      ps.payWay = o.driverJzRecordId.payWay ? 'CASH_PAY' : 'JZ_PAY';
      // 报账金额
      ps.jzMoney = o.payMoney;
      // 备注
      ps.jzRemark = o.remark;
      // 图片上传
      ps.jzUrl = o.reimVoucherUrl.indexOf('=') != -1 ? '/kcbFiles'+o.reimVoucherUrl.split('=')[1] : o.reimVoucherUrl;

      // 只有月停车费和月洗车费有开始时间和结束时间，其他类型只有开始时间
      if(o.reimTypeId.typeMark === 'YTCF' || o.reimTypeId.typeMark === 'YXCF') {
        ps.jzsDate = o.costStartDate;
        ps.jzeDate = o.costEndDate;
      }else {
        ps.jzsDate = o.payDate;
        ps.jzeDate = '';
      }
    }
    
    // 初始化-基础数据
    this.init();
  },
  methods: {
    init() {
      // 获取-车牌号-选择数据
      logisticsSer.getAllPlateNum({status: 0}).then(res => {
        if(res?.plateNums) this.carNumList = Object.keys(res.plateNums).map((item) => ({
          label: item, value: item,
        }));
      });

      // 获取-驾驶员-选择数据
      commonSer.getDriverDict({}).then((res) => {
        if(res?.data) this.driverList = res.data || [];
      });
    },

    // 设置-图片选择地址
    setImgUrl(data) {
      this.fm.ps.jzUrl = data.url;
    },
    
    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);

      console.log('初始提交参数', ps);
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          // 参数处理
          

          orderSer.adupNoRouteReim(ps).then(res => {
            sb.load = false;

            if (res.code !== 1) {
              U.qerror(res.msg);
            }else{
              U.qsuccess(res.msg);

              that.$emit("closeMd");
              that.$emit("reloadDg");
            }
          });
        }
      });
    },

    // handleAccount() {
    //   this.$refs.formRef.validate(validate => {
    //     if (validate) {
    //       this.loading = true

    //       let startTime = this.addData.jzsDate
    //       if (startTime) {
    //         this.addData.jzsDate = startTime[0]
    //         this.addData.jzeDate = startTime[1]
    //       } else {
    //         this.addData.jzsDate = ''
    //         this.addData.jzeDate = ''
    //       }

    //       let params = {...this.addData}
    //       delete params.time

    //       let loading = this.U.qloading("提交中，请稍后...");
    //       adupNoRouteReim(params).then(res => {
    //         this.U.qclose(loading);
    //         this.loading = false
    //         if (res.code !== 1) {
    //           return this.U.qerror(res.msg);
    //         }
    //         this.$emit("closeMd");
    //         this.$emit("reloadDg");
    //       }).catch(() => {
    //         this.loading = false
    //         this.U.qclose(loading);
    //       })
    //     }
    //   });
    // }


  }
}
</script>

<style scoped>

</style>